<template>
    <div class="screen screen1">
        <topinfo ref="topinfo"></topinfo>
        <div class="screen1body">
            <div>
                <module title="IVR来源" icon="icon-SourceEvents">
                    <ivrsource ref="ivrsource"></ivrsource>
                </module>
                <middlemodule title="当日服务累计">
                    <that-day-total ref="thatdaytotal"></that-day-total>
                </middlemodule>
                <module title="渠道接通量" icon="icon-jieruliang">
                    <channel-access ref="channelaccess"></channel-access>
                </module>
            </div>
            <div>
                <module title="24小时话务监控" icon="icon-shebeijiankong">
                    <allhoursmon ref="allhoursmon"></allhoursmon>
                </module>
                <middlemodule title="当前实时话务">
                    <real-time ref="realtime"></real-time>
                </middlemodule>
                <module title="在线话务监控" icon="icon-huawu">
                    <onlinemon ref="onlinemon"></onlinemon>
                </module>
            </div>
            <span class="splitline"></span>
        </div>
    </div>
</template>

<script>
    import module from './baseComponents/module';
    import middlemodule from './screen1parts/middlemodule';
    import topinfo from './screen1parts/topinfo'
    import ivrsource from './screen1parts/ivrsource'
    import thatDayTotal from './screen1parts/that-day-total'
    import realTime from './screen1parts/real-time'
    import channelAccess from './screen1parts/channel-access'
    import allhoursmon from './screen1parts/allhoursmon'
    import onlinemon from './screen1parts/onlinemon'
    export default {
        name: "screen1",
        components:{
            topinfo,module,ivrsource,middlemodule,thatDayTotal,realTime,channelAccess,allhoursmon,onlinemon
        },
        created(){
            // console.log('创建屏幕一')
        },
        /*mounted(){
            console.log(this.$refs)
        },*/
        methods:{
            //刷新当前屏幕
            refreshThisSc(){
                this.$refs.topinfo.refresh();  //刷新顶部信息
                this.$refs.ivrsource.refresh();  //IVR来源
                this.$refs.thatdaytotal.refresh();  //当日服务累计
                this.$refs.channelaccess.refresh();  //渠道接通量
                this.$refs.allhoursmon.refresh();  //24小时话务监控
                this.$refs.onlinemon.refresh();  //在线话务监控
                this.$refs.realtime.refresh();  //当前实时话务
            }
        }
    }
</script>

<style lang="less" scoped>
    .screen1{
        flex-direction: column;
        .screen1body{
            flex: 1 0 auto;
            height: 0;
            display: block;
            position: relative;
            &>div{
                box-sizing: border-box;
                height: 50%;
                padding-top: 18px;
                flex-grow: 1;
                display: flex;
                &>div{
                    width: 600px; height: 100%;  flex: 1 1 auto;
                }
            }

            .splitline{
               width: 500px;
                height: 1px;
                background: url("images/spit.png") no-repeat;
                position: absolute;
                top: 50%;
                left: 50%;
                margin: 16px 0 0 -250px;
            }
        }
    }
</style>
